<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto list space-y-20">
			<view class="flex-row items-center list-item space-x-9" @click="toDetail(item.msg_id)" v-for="(item, index) in list" :key="index">
				<image class="shrink-0 image_6" src="/static/message1.png" />
				<view class="flex-col flex-auto space-y-18">
					<view class="flex-row justify-between items-center">
						<text class="font_2">【系统消息】</text>
						<text class="font_3">{{item.create_time}}</text>
					</view>
					<view class="flex-row justify-between items-center group">
						<text class="font_4 ellipsis1" >{{item.subject}}</text>
						<view class="image_7" v-if="item.status==0"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	let p = ref(1)
	let list = ref([])
	onShow(() => {
		list.value.length=0
		p.value=1
		getDate()
	})
	onReachBottom(() => {
		console.log("上拉");
		p.value++
		getDate()
	})
	
	const getDate = () => {
		proxy.$req.requestPOST(proxy.$api.CenterInfo.messages, {
			member_id: uni.getStorageSync('member_id'),
			p:p.value
		}).then(res => {
			if (res.flag == "success") {
				list.value = [...list.value, ...res.data.list]
			}
		})
	}
	const toDetail = (msg_id) => {
		console.log(msg_id);
		uni.navigateTo({
			url: '/pages/messageDetail/messageDetail?msg_id='+msg_id
		})
	}
</script>

<style scoped lang="css">
	.page {
		background-color: #f8f8f8;
		width: 100%;
		/* overflow-y: auto; */
		overflow-x: hidden;
		min-height: 100vh;
	}

	.list {
		padding: 17rpx 0 20rpx;
		/* overflow-y: auto; */
	}

	.space-y-20>view:not(:first-child),
	.space-y-20>text:not(:first-child),
	.space-y-20>image:not(:first-child) {
		margin-top: 20rpx;
	}

	.list-item {
		padding: 28rpx 28rpx 28rpx 32rpx;
		background-color: #ffffff;
	}

	.space-x-9>view:not(:first-child),
	.space-x-9>text:not(:first-child),
	.space-x-9>image:not(:first-child) {
		margin-left: 9rpx;
	}

	.image_6 {
		width: 88rpx;
		height: 88rpx;
	}

	.space-y-18>view:not(:first-child),
	.space-y-18>text:not(:first-child),
	.space-y-18>image:not(:first-child) {
		margin-top: 18rpx;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: PingFangSC;
		line-height: 29rpx;
		color: #333333;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: PingFangSC;
		line-height: 23rpx;
		color: #9e9e9e;
	}

	.group {
		padding-left: 11rpx;
		padding-right: 3rpx;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: PingFangSC;
		line-height: 28rpx;
		color: #9e9e9e;
	}

	.badge {
		flex-shrink: 0;
		margin-left: 37rpx;
	}

	.image_7 {
		width: 18rpx;
		height: 18rpx;
		background: #FF3333;
		border-radius: 50%;
	}
</style>